<template>
  <div class="goodsinfo-container">
    <!-- 商品轮播区域 -->
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <swiper :lunbotuList="lunbotuList" :isfull="false"></swiper>
        </div>
      </div>
    </div>
    <!-- 商品购买区域 -->
    <div class="mui-card">
      <div class="mui-card-header">商品的名称标题</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <P class="price">
            市场价：
            <del>￥2399</del>&nbsp;&nbsp;销售价：
            <span class="now_price">￥2199</span>
          </P>
          <p>购买数量：<goodsinfonumberbox></goodsinfonumberbox></p>
          <p>
            <mt-button type="primary" size="small">立即购买</mt-button>
            <mt-button type="danger" size="small">加入购物车</mt-button>
          </p>
        </div>
      </div>
    </div>
    <!-- 商品参数区域 -->
    <div class="mui-card">
      <div class="mui-card-header">页眉</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）</div>
      </div>
      <div class="mui-card-footer">页脚</div>
    </div>
  </div>
</template>
<script>
//按需导入提示组件
import { Toast } from "mint-ui";
//导入轮播图组件
import swiper from "../subcomponents/swiper.vue";
//导入数字输入框组件
import goodsinfonumberbox from "../subcomponents/goodsinfo_numberbox.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      lunbotuList: [] //保存轮播图的数组
    };
  },
  created() {
    this.getLunbotu();
  },
  methods: {
    getLunbotu() {
      this.$https
        .get("http://www.liulongbin.top:3005/api/getthumimages/" + this.id)
        .then(res => {
          //console.log(res.data);
          if (res.data.status === 0) {
            //成功了
            res.data.message.forEach(element => {
              element.img = element.src;
            });
            this.lunbotuList = res.data.message;
          } else {
            Toast("加载轮播图失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  components: { swiper,goodsinfonumberbox }
};
</script>

<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  // 这个属性定义溢出元素内容区的内容会如何处理。
  // 如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。
  // 因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
  overflow: hidden;
  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
}
</style>